<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="right" @click="postPhoto" v-if="addList.length!=0">
				保存
			</div>
			<div slot="right" @click="showFootHandle = true" v-if="!showFootHandle">
				选择
			</div>
			<div slot="right" @click="hideFoot" v-if="showFootHandle">
				取消
			</div>
		</my-header>
		<div class="cont-nof" :class="showFootHandle?'cont':''">
			<div class="photo fl" v-if="!showFootHandle">
				<li class="weui-uploader__input-box max">
					<input ref="uploadImg" class="weui-uploader__input" type="file" accept="image/*" multiple @change="upload" />
				</li>
			</div>
			<div class="photo fl pr" v-for="item in list">
				<!-- 选择框 -->
				<div class="weui-cells weui-cells_checkbox daily-select" v-if="showFootHandle">
					<label class="weui-cell weui-check__label my-weui-cell-select">
						<div class="weui-cell__hd my-weui-cell__hd">
							<input type="checkbox" class="weui-check" v-model="item.isSelect" @click="selectItem(item)">
							<i class="weui-icon-checked"></i>
						</div>
					</label>
				</div>
				<img :src="item.url" alt="" @click="show(item.url)" width="100%" height="100%">
			</div>
		</div>
		<div class="flex footHandle">
			<div class="weui-cells weui-cells_checkbox select-all fl" style="margin-top: 0;">
				<label class="weui-cell weui-check__label my-weui-cell-select">
					<div class="weui-cell__bd" style="margin-right: 1rem;">
						<p class="select-text">全选</p>
					</div>
					<div class="weui-cell__hd my-weui-cell__hd">
						<input type="checkbox" class="weui-check" v-model="isSelectAll" @click="selectAll">
						<i class="weui-icon-checked"></i>
					</div>
				</label>
			</div>
			<div>
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn fr" @click="delFn">删除</a>
			</div>
		</div>
	</div>
</template>

<script>
	import wx from "weixin-js-sdk";
	export default {
		data() {
			return {
				id: null,
				list: [],
				addList: [],
				showFootHandle: false,
				isSelectAll: false,
				isSelectNum: 0,
			}
		},
		methods: {
			selectAll() { //全选
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = !this.isSelectAll;
				}!this.isSelectAll ? this.isSelectNum = this.list.length : this.isSelectNum = 0;
			},
			selectItem(item) { //单选
				item.isSelect = !item.isSelect;
				item.isSelect ? this.isSelectNum++ : this.isSelectNum--
				this.isSelectNum === this.list.length ? this.isSelectAll = true : this.isSelectAll = false;
			},
			hideFoot() { //取消
				this.showFootHandle = false;
				this.isSelectAll = false;
				this.isSelectNum = 0;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = false;
				}
			},
			upload(e) {
				let files = e.target.files;
				if (files.length === 0) {
					return;
				}
				for (let f = 0; f < files.length; f++) {
					let formData = new window.FormData();
					formData.append("file", files[f]);
					this.$http.uploadFile(formData).then(resp => {
						let data = resp.data;
						let file = {
							fileName: data.key,
							url: data.url,
							type: data.mimeType,
						};
						this.list.push(file);
						this.addList.push(file);
					});
				}
			},
			show(url) {
				if (!this.showFootHandle) {
					wx.previewImage({
						previewImage: url,
						urls: [url]
					})
				}
			},
			postPhoto() {
				let _this = this;
				this.$toast.show('正在保存', 'loading');
				let fileList = this.addList.map(file => file.fileName);
				this.$http.postAlbum({
					mainId: this.id,
					fileList: fileList
				}).then(resp => {
					this.addList = [];
					this.$toast.hide();
					this.$toast.show('正在保存', 'success');
					setTimeout(function() {
						_this.$toast.hide();
					}, 1000)
				})
			},
			queryFn() {
				this.$toast.show('正在获取相片', 'loading');
				this.$http.fetchAlbumImageList({
					mainId: this.id
				}).then(resp => {
					this.$toast.hide();
					this.list = resp.data;
				})
			},
			delFn() { //删除动态
				let ids = this.list.filter(file => file.isSelect).map(file => file.id).join(",");
				if (!ids) {
					this.$weui.topTips('请选择相片');
					return;
				}
				this.$http.deleAlbumImages({
					ids: ids
				}).then(resp => {
					this.$weui.toast('删除成功');
					this.showFootHandle = false;
					this.isSelectAll = false;
					this.queryFn();
				})
			},
		},
		created() {
			this.id = this.$route.query.id;
			this.queryFn();
		}
	}
</script>

<style scoped>
	.photo {
		width: calc(25% - 0.2rem);
		margin: 0.1rem;
		height: 10rem;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.footHandle {
		background: #fff;
		height: 6.2rem;
		justify-content: space-between;
		padding: 0 1rem;
		box-sizing: border-box;
	}

	.select-photo {
		margin-top: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
	}

	.select-photo label {
		width: 100%;
		height: 100%;
	}

	.footHandle {
		background: #fff;
		height: 6.2rem;
		justify-content: space-between;
		padding: 0 1rem;
		box-sizing: border-box;
	}
</style>
